<template>
    <div>
        <div class="top">
            <div class="tab tab_on_add">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>添加商品</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
        </div>
        <div class="body_content">
            <div class="body_content_tab">
                <div class="bookmark">
                    <div class="square"><i class="bookmark_content el-icon-s-claim"> 添加商品信息</i></div>
                    <div class="trangle"></div>
                </div>
                <div class="body_content_tab_Forms">
                    <el-form :rules="workload"  ref="form" :model="form" label-width="100px">
                        <el-form-item label="商品分类">
                            <el-select @click.enter.native="newTreedate"  id="drop_down_box" v-model="form.classify" placeholder="请选择分类">
                                <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="name" label="商品名称">
                            <el-input style="width: 224px" v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品预览图：" id="supmeta">
                            <el-upload
                                    ref="upload"
                                    multiple
                                    :before-upload="beforeA"
                                    :auto-upload="false"
                                    action="http://localhost:8081/addpagepromige"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                        </el-form-item>
                        <el-form-item prop="introduce" label="商品介绍">
                            <el-input  style="width: 300px" type="textarea" v-model="form.introduce"></el-input>
                        </el-form-item>
                        <el-form-item prop="label" label="商品标签">
                            <el-input style="width: 300px" type="textarea" v-model="form.label"></el-input>
                        </el-form-item>
                        <el-form-item prop="Item_number" label="商品货号">
                            <el-input style="width: 224px" v-model="form.Item_number"></el-input>
                        </el-form-item>
                        <el-form-item prop="currentprice_product" label="商品售价">
                            <el-input style="width: 224px" v-model="form.currentprice_product"></el-input>
                        </el-form-item>
                        <el-form-item prop="inventory" label="商品库存">
                            <el-input v-model="form.inventory" style="width: 224px"></el-input>
                        </el-form-item>
                        <el-form-item  label="商品推荐">
                            <el-radio-group v-model="form.recommend">
                                <el-radio label="2" prop="新品">新品</el-radio>
                                <el-radio label="3" prop="推荐">推荐</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="可用优惠券">
                            <el-radio-group v-model="form.Coupons">
                                <el-radio label="2" prop="否">否</el-radio>
                                <el-radio label="3" prop="是">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="服务保证">
                            <el-radio-group v-model="form.Service_guarantee">
                                <el-radio label="2" prop="无忧退货">无忧退货</el-radio>
                                <el-radio label="3" prop="快速退款">快速退款</el-radio>
                                <el-radio label="4" prop="免费包邮">免费包邮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="background-color: #54C9B0;color: #FFFFFF" @click="onSubmit(`form`)">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        data() {
            return {
                proid:'',//商品主键
                form: {
                    classify:'',//分类
                    name: '',//名称
                    introduce: '',//介绍
                    label: '',//标签
                    Item_number : '',//货号
                    recommend:'',//推荐
                    Coupons:'',//优惠券
                    Service_guarantee:'',//服务保证
                    currentprice_product:'',//售价
                    inventory:''//售价
                },
                //下拉框数据
                TreeData2:[],
                TreeData3:[],//不会变动的数据
                dialogImageUrl: '',
                dialogVisible: false,
                workload: {
                    name:[{
                        required: true,
                        message: '请填写商品名称',
                        trigger: 'change'
                    }],
                    introduce:[{
                        required: true,
                        message: '请填写商品介绍',
                        trigger: 'change'
                    }],
                    label:[{
                        required: true,
                        message: '请填写商品标签',
                        trigger: 'change'
                    }],
                    Item_number:[{
                        required: true,
                        message: '请填写商品货号',
                        trigger: 'change'
                    }],
                    currentprice_product:[{
                        required: true,
                        message: '请填写商品售价',
                        trigger: 'change'
                    }],
                    inventory:[{
                        required: true,
                        message: '请填写库存选项',
                        trigger: 'change'
                    }]
                },
                // //图片上传路径
                // location:"http://localhost:8081/addpagepromige?productId=",
                // //图片上传路径携带参数
                // locations:''
            }
        },

        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            //提交
            onSubmit(form) {
                sessionStorage.getItem("id")
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$http.get("/addpagepro",{
                            params:{
                                productCode:this.form.Item_number,//商品编号
                                recommend:this.form.recommend,//商品推荐
                                categroyId:this.form.classify,//商品分类
                                discount:this.form.Coupons,//是否可用优惠券
                                ensure:this.form.Service_guarantee,//服务保证
                                productName:this.form.name,//商品名称
                                searchKeywords:this.form.label,//搜索关键字
                                mainImage:"1",//商品主
                                currentpriceProduct:this.form.currentprice_product,//商品现在价格
                                productDescription:this.form.introduce,//简介
                                hits:'0',//商品点击量
                                productSate:'2',//商品状态
                                createUser:'',
                                createDate:new Date(),
                            }
                        }).then(res => {
                            sessionStorage.setItem("id",res.data);
                            sessionStorage.getItem("id");
                            this.proid = sessionStorage.getItem("id");
                            if (res.data != null) {
                                console.log(this.proid)
                                this.locations=this.location+this.proid;//图片拼接路径
                                this.$http.get("/addCourseRecord",{
                                    params:{
                                        courseId:this.proid,
                                        launchId:"暂时是死数据",//发起人
                                        applyDate:new Date(),
                                        result:"待审核",//商品编号
                                        type:"3"
                                    }
                                }).then(res => {
                                    console.log(res.data)
                                    if (res.data != 0) {
                                        console.log(this.proid)
                                        // this.$refs.upload.submit()
                                        this.$message ( {
                                            duration:1000,
                                            type: "success" ,
                                            message:"添加成功!"
                                        });
                                        this.reload();
                                    }
                                });
                            }
                        });

                    }else {
                        this.$message ( {
                            duration:1000,
                            type: "info" ,
                            message:"请填写必填项!"
                        });
                    }
                })
            },
            Treedate(){
                this.$http.get("/getPriductTree").then(res => {
                    this.TreeData3 = res.data;
                });
            },
            newTreedate(){
                this.TreeData2 = [];
                this.getTreeData(this.TreeData3)
            },
            getTreeData(data) {
                // 循环遍历json数据
                for (var i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        this.TreeData2.push(data[i])
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
            },
            beforeA(file){
                //设置文件格式
                //const isPDF = file.type === 'application/jpg';
                //设置文件大小限制
                const isLt10M = file.size / 1024 / 1024 < 10;
                /*if (!isPDF) {
                    this.$message.error('上传的文件只能是 PDF 格式!');
                    return false;
                }*/
                if (!isLt10M) {
                    this.$message.error('上传的文件大小不能超过 10MB!');
                }
                return true;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }

        },
        //先调用一下传入数据的方法
        created(){
            this.Treedate();
        }
    };
</script>
<style>

    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*头*/
    .tab_on_add{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
/*    内容区*/
    .body_content{
        margin: -12px 0px -188px -20px;
        background-color: #FCFCFC;
        height: 976px;
    }
    .body_content_tab {
        overflow-y: hidden;
        background-color: #FFFFFF;
        width: 900px;
        margin: 0px 0px 0px 172px;
        border: 1px #E4E4E4 solid;
    }
/*    表单*/
    .el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #606266;
        background-color: #FFF;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    .body_content_tab_Forms{
        margin: 0px 0px 0px 244px;
        padding: 85px 0px 0px 0px;
    }
    .trangle{
        margin: 0px 0px 0px 37px;
        border-top: 29px solid #000;
        border-bottom: 29px solid #000;
        border-left: 19px solid #000;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #9FA7B4;
        border-radius: 4%;
    }
    .square{
        margin: 0px 0px -57px -160px;
        width: 197px;
        height: 57px;
        background: #A0A7B4;
    }
    .bookmark{
        margin: 50px 0px 0px 0px;
        position: absolute;
    }
    .bookmark_content{
        margin: 19px 0px 0px 19px;
        color: #FFFFFF;
    }
</style>